<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小兔鲜儿</title>
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
  <div>
    <!-- 顶部导航topnav -->
    <div class="topnav">
      <div class="container">
        <ul class="topul">
          <li><a href="login/login.html">请先登录</a></li>
          <li><a href="" class="logout">免费注册</a></li>
          <li><a href="">我的订单</a></li>
          <li><a href="">会员中心</a></li>
          <li><a href="">帮助中心</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href="">
              <i class="iconfont icon-iPad"></i>手机版</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="header">
      <div class="container">
        <div class="logo">
          <a href="#"></a>
        </div>
        <!-- 头部导航headernav -->
        <ul class="headernav">
          <li><a href="">首页</a></li>
          <li><a href="" class="home">居家</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">服饰</a></li>
          <li><a href="">母婴</a></li>
          <li><a href="">个护</a></li>
          <li><a href="">严选</a></li>
          <li><a href="">数码</a></li>
          <li><a href="">运动</a></li>
          <li><a href="">杂项</a></li>
        </ul>
        <div class="search">
          <i class="iconfont icon-sousuo"></i>
          <input type="text" placeholder="搜一搜">
        </div>
        <div class="shopcar">
          <a href="Order page.html" class="shopcara">
            <img src="./img图片/car1.png" alt="">
            <em></em>
          </a>
        </div>
      </div>
    </div>
    <!-- 头部导航固定 -->
    <div class="header-sticky">
      <div class="container">
        <a href="" class="logo"><img src="" alt=""></a>
        <!-- 头部导航headernav -->
        <ul class="headernav">
          <li><a href="">首页</a></li>
          <li><a href="" class="home">居家</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">服饰</a></li>
          <li><a href="">母婴</a></li>
          <li><a href="">个护</a></li>
          <li><a href="">严选</a></li>
          <li><a href="">数码</a></li>
          <li><a href="">运动</a></li>
          <li><a href="">杂项</a></li>
        </ul>
        <div class="right">
          <a href="">品牌</a>
          <a href="">专题</a>
        </div>
      </div>
    </div>
    <main>
      <div class="main">
        <!-- 轮播图左侧 -->
        <div class="entry">
          <div class="container">
            <div class="category">
              <ul class="menu">
                <li data-index="0">
                  <a href="">居家</a>
                  <a href="">居家生活用品</a>
                  <a href="">收纳</a>


                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>


                </li>
                <li data-index="1">
                  <a href="">美食</a>
                  <a href="">南北干货</a>
                  <a href="">调味酱菜</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="2">
                  <a href="">服饰</a>
                  <a href="">钱包/胸包</a>
                  <a href="">女士靴子</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="3">
                  <a href="">母婴</a>
                  <a href="">T恤/polo/衬衫</a>
                  <a href="">儿童鞋</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="4">
                  <a href="">个护</a>
                  <a href="">家庭清洁</a>
                  <a href="">浴室用品</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="5">
                  <a href="">严选</a>
                  <a href="">滋补保健</a>
                  <a href="">床品家纺</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="6">
                  <a href="">数码</a>
                  <a href="">影音娱乐</a>
                  <a href="">3C数码</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="7">
                  <a href="">运动</a>
                  <a href="">健身大器械</a>
                  <a href="">健身小器械</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>

                    </ul>
                  </div>
                </li>
                <li data-index="8">
                  <a href="">杂项</a>
                  <a href="">家庭清洁杂项</a>
                  <div class="layer">
                    <h4>分类推荐
                      <small>根据您的购买或浏览记录推荐</small>
                    </h4>
                    <ul>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 轮播图banner -->
            <div class="banner">
              <div class="slider">
                <ul>
                  <li>
                    <img
                      src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/4a79180a-1a5a-4042-8a77-4db0b9c800a8.jpg"
                      alt="">
                  </li>
                  <li><img src="" alt=""></li>
                  <li><img src="" alt=""></li>
                  <li><img src="" alt=""></li>
                  <li><img src="" alt=""></li>
                </ul>
                <ol class="indicator">
                  <li class="active"></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <!-- 新鲜好物goods -->
        <div class="goods container">
          <div class="hd">
            <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
            <a href=" ">查看全部
              <i class="iconfont icon-youjiantou"></i>
            </a>
          </div>
          <div class="bd clearfix">
            <ul class="goodslist">
              <li>
                <a href="information2.html">
                  <img src="https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png" alt="">
                  <h3>抓绒保暖,毛毛虫儿童运动鞋26-30</h3>
                  <div>￥<span>109.00</span></div>
                </a>
              </li>
              <li>
                <a href="information3.html">
                  <img src="https://yanxuan-item.nosdn.127.net/084f82c43a71bbc4d280fbb09a47a028.jpg" alt="">
                  <h3>经典格子元素，男童加绒格子衬衫</h3>
                  <div>￥<span>125.00</span></div>
                </a>
              </li>
              <li>
                <a href="information4.html">
                  <img src="https://yanxuan-item.nosdn.127.net/841d7669e6cc23cb249f47d8d39fc17c.jpg" alt="">
                  <h3>新款LOGO印花时尚学步叫叫鞋</h3>
                  <div>￥<span>259.00</span></div>
                </a>
              </li>
              <li>
                <a href="information.html">
                  <img src="https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg" alt="">
                  <h3>休闲潮流运动男士胸包</h3>
                  <div>￥<span>136.00</span></div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 人气推荐goods -->
        <div class="recommend container">
          <div class="hd">
            <h2>人气推荐<span>人气爆款 不容错过</span></h2>
            <a href=" ">查看全部</a>
          </div>
          <div class="bd clearfix">
            <ul class="goodslist">
              <li>
                <a href="#"><img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_1.jpg"
                    alt="">
                  <h3>特惠推荐</h3>
                  <div><span>它们最实惠</span></div>
                </a>
              </li>
              <li>
                <a href="#"><img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_2.jpg"
                    alt="">
                  <h3>爆款推荐</h3>
                  <div><span>它们最受欢迎</span></div>
                </a>
              </li>
              <li>
                <a href="#"><img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg"
                    alt="">
                  <h3>一站买全</h3>
                  <div><span>使用场景下精心优选</span></div>
                </a>
              </li>
              <li>
                <a href="#"><img src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_4.jpg"
                    alt="">
                  <h3>领券中心</h3>
                  <div><span>更多超值优惠券</span></div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 居家 -->
      <div class="pagehome">
        <div class="container">
          <div class="bread">
            <div class="breaditem">
              <a href="" class="backindex">首页</a>
              <i class="iconfont icon-youjiantou"></i>
            </div>
            <div class="breaditem">
              <span>居家</span>
            </div>
          </div>

          <div class="sub-list">
            <h3>全部分类</h3>
            <ul>
              <li>
                <a href="">
                  <img
                    src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-22/7f6a7b20-7902-4b43-b9c5-f33151ef1334.jpg"
                    alt="">
                  <p>居家生活用品</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/366989e4d730594e86fcd60b5ab19acc.png" alt="">
                  <p>收纳</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/b42a85ef15f856081ea9f49e5f6893e2.png" alt="">
                  <p>宠物食品</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/9544b81aaa14c26a8038c2365ff3c2bc.png" alt="">
                  <p>艺术藏品</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/e766b09029ca00680d1e651b5cdc42bd.png" alt="">
                  <p>宠物用品</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/3f34039fa8c26e18e2f4fc96ed8cb6de.png" alt="">
                  <p>家庭医疗</p>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="https://yanxuan.nosdn.127.net/2bfba997fd031317caecc4f0bad17569.png" alt="">
                  <p>中医保健</p>
                </a>
              </li>
            </ul>
          </div>
          <div class="ref-goods">
            <div class="head">
              <h3>-居家生活用品-</h3>
              <a href=""><span>查看全部</span><i class="iconfont icon-youjiantou"></i></a>
            </div>
            <div class="body">
              <a href="" class="goods-item">
                <img
                  src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/7f483771-6831-4a7a-abdb-2625acb755f3.png"
                  alt="">
                <p class="name ellipsis">极光限定 珠光蓝珐琅锅</p>
                <p class="desc ellipsis"></p>
                <p class="price">￥199.00</p>
              </a>
              <a href="" class="goods-item">
                <img
                  src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-05/6fdcac19-dd44-442c-9212-f7ec3cf3ed18.jpg"
                  alt="">
                <p class="name ellipsis">钻石陶瓷涂层多用锅18cm 小奶锅</p>
                <p class="desc ellipsis">安全耐用，易于清洗</p>
                <p class="price">￥149.00</p>
              </a>
            </div>
          </div>
          <div class="ref-goods">
            <div class="head">
              <h3>-收纳-</h3>
              <a href=""><span>查看全部</span><i class="iconfont icon-youjiantou"></i></a>
            </div>
            <div class="body">
              <a href="" class="goods-item">
                <img src="https://yanxuan-item.nosdn.127.net/8147e4685e5a0e47c1624772ee868fcc.jpg" alt="">
                <p class="name ellipsis">开发员自留款，带滚轮双层脏衣篓</p>
                <p class="desc ellipsis">滚轮设计，双层收纳</p>
                <p class="price">￥125.00</p>
              </a>
              <a href="" class="goods-item">
                <img src="https://yanxuan-item.nosdn.127.net/5a608974e36c829898df20fd0ebf184a.png" alt="">
                <p class="name ellipsis">可水洗的布艺收纳盒</p>
                <p class="desc ellipsis">三种规格，收纳杂物</p>
                <p class="price">¥29.90</p>
              </a>
              <a href="" class="goods-item">
                <img src="https://yanxuan-item.nosdn.127.net/75f6cc2c037c09e957cbcc336cf4a652.png" alt="">
                <p class="name ellipsis">换季好帮手，大容量防尘衣物收纳袋</p>
                <p class="desc ellipsis">棉被收纳，干净防尘</p>
                <p class="price">¥69.00</p>
              </a>
              <a href="" class="goods-item">
                <img src="https://yanxuan-item.nosdn.127.net/76a5304c9d7378a83e63554f3077d98b.png" alt="">
                <p class="name ellipsis">爆款明星好物，抽屉式透明储物柜</p>
                <p class="desc ellipsis">抽屉随意拉，东西随意拿，7款尺寸，随意叠加搭配</p>
                <p class="price">¥29.90</p>
              </a>
              <a href="" class="goods-item">
                <img src="https://yanxuan-item.nosdn.127.net/06461cea9e56b56dd4276e1cb81dd884.png" alt="">
                <p class="name ellipsis">给衣柜减减肥，真空防潮压缩袋</p>
                <p class="desc ellipsis">手动压缩，节省空间</p>
                <p class="price">¥79.00</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 底部模块 -->
    <div class="footer">
      <div class="contact">
        <div class="container tact">
          <dl>
            <dt>客户服务</dt>
            <dd>
              <i class="iconfont icon-kefu"></i>
              在线客服
            </dd>
            <dd>
              <i class="iconfont icon-changjianwenti"></i>
              问题反馈
            </dd>
          </dl>
          <dl>
            <dt>关注我们</dt>
            <dd>
              <i class="iconfont icon-weixin"></i>
              公众号
            </dd>
            <dd>
              <i class="iconfont icon-weibo"></i>
              微博
            </dd>
          </dl>
          <dl>
            <dt>下载APP</dt>
            <dd class="qrcode">
              <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/qrcode.520695e8.jpg" alt="">
            </dd>
            <dd class="download">
              <span>扫描二维码</span>
              <span>立马下载APP</span>
              <a href="">下载页面</a>
            </dd>
          </dl>
          <dl>
            <dt>服务热线</dt>
            <dd class="hotline">
              400-0000-000
              <small>周一至周日 8:00-18:00</small>
            </dd>
          </dl>
        </div>
      </div>

      <div class="extra">
        <div class="container">
          <div class="slogan">
            <a href="">
              <i class="iconfont icon-wuliubaozhuangzhihe"></i>
              <span>价格亲民</span>
            </a>
            <a href="">
              <i class="iconfont icon-dianzan"></i>
              <span>物流快捷</span>
            </a>
            <a href="">
              <i class="iconfont icon-truck"></i>
              <span>品质新鲜</span>
            </a>
          </div>

          <div class="copyright">
            <p>
              <a href="">关于我们</a>
              <a href="">帮助中心</a>
              <a href="">售后服务</a>
              <a href="">配送与验收</a>
              <a href="">商务合作</a>
              <a href="">搜索推荐</a>
              <a href="">友情链接</a>
            </p>
            <p>CopyRight © 小兔鲜儿</p>
          </div>
        </div>
      </div>
    </div>



  </div>
  <script src="./js/index.js"></script>
</body>

</html>